<!DOCTYPE html>
<html>
<head>
	<title>BOM</title>
	<meta charset="utf-8">
	<style type="text/css">
		.sty{
			width:300px;
			height: 200px;
			border:2px solid;
			margin:30px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			// 1.获取节点
			var odiv = document.getElementById("div1");
			// console.log(odiv);
			var oinp = document.getElementById("inp");
			// console.log(oinp);
			// var btn1 = document.getElementById("btn");
			// console.log(btn1);
			// 鼠标移入事件
			odiv.onmouseover = function(){
				odiv.style.background = "red";
			}

			// 鼠标移出事件
			odiv.onmouseout = function(){
				odiv.style.background = "green";
			}

			// 鼠标点击事件
			odiv.onclick = function(){
				odiv.style.width = "800px";
				odiv.style.height = "600px";
			}

			// 键盘按下事件
			// oinp.onkeydown = function(event){
			// 	console.log(event.keyCode);
			// 	if(event.keyCode == 13){
			// 		console.log("你按得是enter键盘");
			// 	}	
			// }

			// 键盘松开事件
			// oinp.onkeyup = function(){
			// 	console.log("完成");
			// }

			//域的内容发生改变
			oinp.onchange = function(){
				oinp.value = oinp.value + "早上好";
			}


			// 二、window常用的方法
			// var p = prompt("prompt框");//有提示，还可以输入，有确定和取消按钮,点击确定按钮存储输入的内容，点击取消按钮存储null
			// console.log(p);

			// var a = alert("alert");//有提示，有确定按钮,点击确定按钮无存储输入的内容
			// console.log(a);
			// var c = confirm("confirm框");//有提示，有确定和取消按钮,点击确定按钮存储true，点击取消按钮存储false
			// console.log(c);
			// var btn1 = document.getElementById("btn");
			// var btn2 = document.getElementById("btn2");

			var btn = document.getElementsByTagName("button")[0];//数组集合
			// console.log(btn);

			var url = "http://www.myhopu.com.cn/";
			var img1 = document.getElementsByTagName("img")[0];
			btn.onclick = function(){
				// window.open(url);//新的网站地址
				// img1.src = "2.png";
				img1.setAttribute("src","2.png");
				console.log(img1.getAttribute("alt"));
			}

			var haha = document.getElementsByName("ha");
			console.log(haha);
			// btn[1].onclick = function(){
			// 	window.close();// 只能关闭用open的方法打开的页面，只能在这个新页面里面关闭，很少用
			// }
			var U2 = document.getElementById("U2");
			U2.title = "我改了，你看到了。"
			var up = U2.getElementsByTagName("p");
			console.log(up);
		}// 加载结束符
	</script>
</head>
<body>
	<!-- 一.window常用事件 -->
	<!-- 需求 鼠标移入div div的背景为红色 移出背景色为绿色 点击时div变大 -->
	<div id="div1" class="sty" name="ha"></div>
	<!-- 需求 按下按键，打印提示 -->
	昵称：
	<input type="text" id="inp" value="啦啦啦"  name="ha"/>

	<a href="http://www.baidu.com" onclick = "javascript:return confirm('确定要跳转吗？');">百度一下</a>

	<button id="btn">打开新窗口</button>

	<ul id="U2" title="鼠标悬浮其上的提示">
		<li>1111</li>
		<li>
			2222
			<p>2里面的p</p>
		</li>
		<p>ul的子标签p</p>
	</ul>
	<p>ul的外面的p1</p>
	<p>ul的外面的p2</p>
	<img src="1.png" alt="tishiyuju" />

	
</body>
</html>